{% extends "base.html" %}
{% block content %}

{% with story.key.id as id_story %}
<div id="menu-toolbar" class="ui-state-active">
    <ul class ="left">
        <li><a href="/?id_it={{ story.story_container.key.id }}">{{ story.story_container.name }}</a></li>
        <li>&raquo;</li>
        <li><a href="/iterations?project_id={{ story.story_container.get_project.key.id }}">{{ story.story_container.get_project.name }}</a></li>
    </ul>
    <ul class="right">
        <li><a href="#" id="id_close_link">Close</a></li>
        <li><a href="#" id="id_reactive_link">Reactive</a></li>
        <li><a href="#" id="id_reopen_link">Reopen</a></li>
        <li><a href="#" id="id_resolve_link">Resolve</a></li>
        <li><a href="#" id="id_assign_link">Assign</a></li>
        <li><a href="/story_form?id={{id_story}}" id="id_edit_link">Edit</a></li>
        <li><a href="#" id="id_move_link">Move</a></li>
        <li><a href="#" id="id_comment_link">Comment</a></li>
    </ul>
</div>

<div id="story-container">
    <div class="top">
        <div class="content title">{{ story.name }}</div>
        <div class="content subtitle">
            <span>
                Project&nbsp;<a href="/iterations?project_id={{ story.story_container.get_project.key.id }}"
                                title="List all iterations">{{ story.story_container.get_project.name }}</a></span>
            <span>&nbsp;Iteration&nbsp;<a id="container_id" href="/?id_it={{ story.story_container.key.id }}"
                                          title="List all stories">{{ story.story_container.name }}</a> </span>
        </div>
        <div class="content statusbar">
            <span>Opened by <a href="#" >{{ story.opened_by }}</a>
            </span>
            <span>
                |&nbsp;Assigned to&nbsp;<a href="#" id="id_assigned_to"  class="person">{{ story.assigned_to }}</a>
            </span>
            <span>
                |&nbsp;{{story.opened_date|date:"D, M j, Y"}}
            </span>
            <span>|&nbsp;Priority:</span>
            <span>{{ story.priority }}&nbsp;&nbsp;</span>
            <span>|&nbsp;Category:</span>
            <span>{{ story.category }}&nbsp;&nbsp;</span>
            <span id="status_label" class="status active">{{ story.status }}</span>
        </div>
    </div>
    <div class="notes" id="id_events">
        <div class="note">
            <div class="header ui-widget-content ui-widget-header ui-corner-top">
                <span>Description</span>&nbsp;-&nbsp;
<!--                <span>{{ story.opened_by }}</span>&nbsp;-->
                <span>{{story.opened_date|date:"D, M j, Y"}}</span>
                <span id="id_edit_description" class="cursor_pointer" >
                    <span class="ui-icon ui-icon-pencil float_right"></span>
                </span>
            </div>

            <div class="body ui-widget-content ui-corner-bottom">
                <span id="id_desc"><pre id="id_desc_text" class="text">{{ story.description|escape}}</pre></span>
                <div id="edit_form" class="hide">
                    <form action="/edit_description" method="post" id="editForm">
                        <input type="hidden" name="story_id" value="{{ id_story }}">
                        <li>
                            <textarea cols="100" rows="5"  name="description" id="description_id" class="text ui-widget-content ui-corner-all">{{ story.description }}</textarea>
                        </li>
                        <li>
                            <button  title="Save" type="button" >
                                <span>Save</span>
                            </button >
                            <button  title="Cancel" type="button" >
                                <span>Cancel</span>
                            </button>
                        </li>
                    </form>
                </div>
            </div>
        </div>
        <div class="note ui-corner-all">
            <div class="header _ui-widget-content ui-widget-header ui-corner-top">
                <span>Estimated time:
                </span>
                <span class="data" dir="ltr">
                    {{ story.estimated_time }} hours
                </span>&nbsp;|&nbsp;
                <span> elapsed:
                    <span id="label_elapsed_time" class="data">
                        {{ story.elapsed_time }} hours
                    </span>
                </span>&nbsp;|&nbsp;
                <span> remaining:
                    <span id="label_remaining_time" class="data">
                        {{ story.remaining_time }} hours
                    </span>
                </span>&nbsp;|&nbsp;
                <span> percentage:
                    <span id="percentage_id" class="data">{{ story.percentage }}</span>
                </span>
                <span id="id_edit_time" class="cursor_pointer" >
                    <span class="ui-icon ui-icon-pencil float_right"></span>
                </span>
            </div>

            <div class="body ui-widget-content  ui-corner-bottom">
                <div id="progressbar" val="{{story.percentage}}"></div>
            </div>
        </div>
        {% for event in story.get_events %}
        <div class="note _ui-widget-content ui-corner-all">
            <div class="header event_header event ui-widget-content ui-state-highlight_ ui-corner-top">
                <span class="title">{{ event.title }}</span> by
                <span class="author">{{ event.author }}</span> -
                <span class="date" dir="ltr">{{event.date|date:"D, M j, Y H:m:s" }}</span>
            </div>
            <div class="body ui-widget-content ui-corner-bottom">
                <span><pre class="text">{{ event.description|escape}}</pre></span>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<div id="assign_form" class="form_container" title="Assign" >
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/assign_form" method="post" id="assignForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="id_assigned_to">Assigned to:</label>
                    <select name="assigned_to" id="id_assigned_to" class="select ui-widget-content ui-corner-all">
                        {% for member in story.story_container.get_project.get_members %}
                        <option value="{{ member.key.id }}">{{ member.user.nickname }}</option>
                        {% endfor%}
                    </select>
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="resolve_form" title="Change status" class="form_container">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/change_story_status" method="post" id="resolveForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="id_status">Status:</label>
                    <select name="status" id="id_status" class="select ui-widget-content ui-corner-all">
                        <option value="Implemented">Implemented</option>
                        <option value="Fixed">Fixed</option>
                        <option value="No Reproducible">No Reproducible</option>
                        <option value="Duplicated">Duplicated</option>
                    </select>
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="postpone_form" title="Move" class="form_container">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/postpone_story" method="post" id="postponeForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="id_backlog">Move to</label>
                    <select name="backlog" id="id_status" class="select ui-widget-content ui-corner-all" >
                        {% for back in story.story_container.get_containers %}
                        <option value="{{ back.key }}">{{ back.name }}</option>
                        {% endfor %}
                    </select>
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="reactive_form" class="form_container" title="Reactive">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/change_story_status" method="post" id="reactiveForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="close_form" class="form_container" title="Close">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/change_story_status" method="post" id="closeForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="reopen_form" class="form_container" title="Reopen">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/reopen_story" method="post" id="reopenForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="comment_form" class="form_container" title="Comment">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/comment_story" method="post" id="commentForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="id_comment">Comment:</label>
                    <textarea  cols="50" rows="5" id="id_comment" name="comment" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>
<div id="time_form" class="form_container" title="Reopen">
    <p class="validate_tips">Fill out all form fields.</p>
    <form action="/add_time_worked" method="post" id="timeForm">
        <input type="hidden" name="story_id" value="{{ id_story }}">
        <fieldset>
            <ol>
                <li>
                    <label for="name">Time</label>
                    <input type="text" name="time" id="id_elapsed_time" class="text ui-widget-content ui-corner-all">
                </li>
                <li>
                    <label for="id_description">Description:</label>
                    <textarea  cols="50" rows="5" id="id_description" name="description" class="text ui-widget-content ui-corner-all description"></textarea>
                </li>
            </ol>
        </fieldset>
    </form>
</div>

{% endwith %}

<div id="error-message" title="Error!">
    <span>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 1px 7px 50px 0;"></span>
        <span id="warning_msg"></span>
    </span>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('div:[id^=progressbar]').each(function() {
            var percentage = parseFloat($(this).attr('val'));
            $(this).progressbar({value: percentage});
        });

        $(function() {
            $( "button:button").button();
        });
        updateControls('{{story.status}}');
        showControl('{{story.current_user_assigned}}');
        $("form button[type=button]").click(function() {
            $( 'button[type=button][clicked=true]' ).removeAttr("clicked");
            $(this).attr("clicked", "true");
            $(this).parent().parent().submit();
        });

        function updateControls(status) {
            var user_valid = '{{story.contains_current_user}}';
            var resolve_status = ['Implemented', 'Fixed', 'No Reproducible', 'Duplicated'];
            $('#status_label').text(status);
            if (user_valid == 'True') {
                if (status == 'Active') {
                    $('#id_resolve_link, #id_assign_link, #id_move_link, #id_edit_link, #id_comment_link').removeClass('hide');
                    $( '#id_edit_description' ).removeClass( 'hide' );
                    $('#id_close_link, #id_reactive_link, #id_reopen_link').addClass('hide');
                } else {
                    if (include(resolve_status, status)) {
                        $('#id_close_link, #id_reactive_link,  #id_assign_link,').removeClass('hide');
                        $( '#id_edit_description' ).removeClass( 'hide' );
                        $('#id_reopen_link').addClass('hide');
                    } else {
                        if (status == 'Closed') {
                            $('#id_close_link, #id_reactive_link, #id_resolve_link,').addClass('hide');
                            $('#id_assign_link, #id_edit_link, #id_move_link, #id_comment_link').addClass('hide');
                            $('#id_reopen_link').removeClass('hide');
                            $( '#id_edit_description' ).addClass( 'hide' );
                        }
                    }
                }
            } else {
                $('#id_resolve_link, #id_assign_link').addClass('hide');
                $('#id_edit_link, #id_move_link').addClass('hide');
                $('#id_close_link, #id_reactive_link, #id_reopen_link').addClass('hide');
                $( '#id_edit_description' ).addClass( 'hide' );
                if (status == 'Closed') {
                    $('#id_comment_link').addClass('hide');
                }
            }
        }

        function showControl(current_user) {
            if (current_user.toString().toLowerCase() == 'true' ) {
                $( '#id_resolve_link' ).removeClass('hide');
                $( '#id_edit_time' ).removeClass('hide');
//                $( '#id_edit_time' ).addClass('cursor_pointer');
            } else {
                $( '#id_resolve_link' ).addClass('hide');
//                $( '#id_edit_time' ).removeClass('cursor_pointer');
                $( '#id_edit_time' ).addClass('hide');
            }
        }
        function include(array, value) {
            return ($.inArray(value, array) != -1);
        }

        var elapsed_time = $( "#id_elapsed_time" ),
        descriptions = $( ".description" ),
        tips = $( ".validate_tips" ),
        allFields = $( [] ).add( elapsed_time ).add( descriptions );
        function updateTips( t ) {
            tips
            .text( t )
            .addClass( "ui-state-highlight" );
            setTimeout(function() {
                tips.removeClass( "ui-state-highlight", 1500 );
            }, 5500 );
        }

        function checkRegexp( o, regexp, n ) {
            if ( !( regexp.test( o.val() ) ) ) {
                o.addClass( "ui-state-error" );
                updateTips( n );
                return false;
            } else {
                return true;
            }
        }
        function resetStoryForm() {
            tips.text('Fill out all form fields.');
            allFields.val( "" ).removeClass( "ui-state-error" );

        }
        $( 'form input[type=text]' ).keydown(function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
        $( "#assign_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $('#assignForm'),
                    url = $form.attr( 'action' ),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            var html = $(data.html).html();
                            $('#id_events').append(html);
                            $('#id_assigned_to').text(data.assigned_to);
                            $('#assign_form').addClass('hide');
                            showControl(data.current_user);
                            updateControls(data.status);
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_assign_link" ).click(function(event) {
            event.preventDefault();
            $( "#assign_form" ).dialog( "open" );
        });

        $( "#resolve_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#resolveForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            var html = $(data.html).html();
                            $('#id_events').append(html);
                            updateControls(data.status);
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );

                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_resolve_link" ).click(function(event) {
            event.preventDefault();
            $( "#resolve_form" ).dialog( "open" );
        });

        $( "#postpone_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#postponeForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            var html = $(data.html).html();
                            $('#id_events').append(html);
                            $("#container_id").text(data.name);
                            $("#container_id").attr("href", "/?id_it=" + data.id);
                            updateControls();
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );

                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_move_link" ).click(function(event) {
            event.preventDefault();
            $( "#postpone_form" ).dialog( "open" );
        });
        $( "#reactive_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#reactiveForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize() + "&status=Active";
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            var html = $(data.html).html();
                            $('#id_events').append(html);
                            updateControls(data.status);
                            $('#reactive_form').addClass('hide');
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_reactive_link" ).click(function(event) {
            event.preventDefault();
            $( "#reactive_form" ).dialog( "open" );
        });

        $( "#close_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#closeForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize() + "&status=Closed";
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            var html = $(data.html).html();
                            $('#id_events').append(html);
                            updateControls(data.status);
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_close_link" ).click(function(event) {
            event.preventDefault();
            $( "#close_form" ).dialog( "open" );
        });

        $( "#reopen_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#reopenForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            var html = $(data.html).html();
                            $('#id_events').append(html);
                            updateControls(data.status);
                            $('#reopen_form').addClass('hide');
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_reopen_link" ).click(function(event) {
            event.preventDefault();
            $( "#reopen_form" ).dialog( "open" );
        });

        $( "#comment_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $( '#commentForm' ),
                    url = $form.attr( 'action' ),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            var html = $(data.html).html();
                            $('#id_events').append(html);
                        },
                        error: function (data) {
                            showErrorMsg(data.responseText);
                        }
                    });
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_comment_link" ).click(function(event) {
            event.preventDefault();
            $( "#comment_form" ).dialog( "open" );
        });

        $( "#time_form" ).dialog({
            autoOpen: false,
            height: 260,
            width: 480,
            modal: true,
            buttons: {
                "Save": function() {
                    var valid = true;
                    allFields.removeClass( "ui-state-error" );
                    valid = valid && checkRegexp( elapsed_time, /^[+-]?\d+(\.\d+)?$/i, "Elapsed time must be a number." );
                    if (valid) {
                        var $form = $( '#timeForm' ),
                        url = $form.attr( 'action' ),
                        data = $form.serialize();
                        $.ajax({
                            type: 'POST',
                            url: url,
                            dataType: 'json',
                            data: data,
                            success: function(data) {
                                var html = $(data.html).html();
                                $('#id_events').append(html);
                                $('#label_elapsed_time').text(data.elapsed_time);
                                $('#label_remaining_time').text(data.remaining_time);
                                $('#percentage_id').text(data.percentage);
                                $("#progressbar").progressbar({value: data.percentage});
                            },
                            error: function (data) {
                                showErrorMsg(data.responseText);
                            }
                        });
                        $( this ).dialog( "close" );
                    }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                resetStoryForm();
            }
        });
        $( "#id_edit_time" ).click(function(event) {
            $( "#time_form" ).dialog( "open" );
        });

        $( "#error-message" ).dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

        $("#id_edit_description").click(function() {
            var str = $('#id_desc_text').text();
            $('#description_id').val(str);
            $('#edit_form').removeClass('hide');
            $('#id_desc').addClass('hide');
        });

        $("#editForm").submit(function(event) {
            event.preventDefault();
            var $form = $( this ),
            source = $form.find( 'button[type=button][clicked=true]' ).attr('title');
            if (source.toLowerCase() == 'save') {
                var url = $form.attr( 'action' ),
                data = $form.serialize();
                $.ajax({
                    type: 'POST',
                    url: url,
                    dataType: 'json',
                    data: data,
                    success: function(data) {
                        var html = $(data.html).html();
                        $('#id_events').append(html);
                        $('#id_desc_text').text(data.description);
                        $('#id_desc').removeClass('hide');
                        $('#edit_form').addClass('hide');
                    },
                    error: function (data) {
                        showErrorMsg(data.responseText);
                    }
                });
            } else {
                $('#id_desc').removeClass('hide');
                $('#edit_form').addClass('hide');
            }
        });

        function showErrorMsg(msg) {
            $( '#warning_msg' ).text(msg);
            $( "#error-message" ).dialog( "open" );
        }
    });

</script>

{% endblock %}